<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" th:href="@{css/CustomForm.css}">
    <!--/*@thymesVar id="SimpleUser" type="cn.org.y24.EmploySystem.entity.SimpleUser"*/-->
    <title th:text="${SimpleUser.username}"></title>
</head>
<body>

</div>
<!--/*@thymesVar id="SimpleUser" type="cn.org.y24.EmploySystem.entity.SimpleUser"*/-->
<div class="topDiv">
    <header style="background: #0f6674;border-radius: 10px;">
        <div>
            <h1 th:id="infoID" th:text="${'Admin user '+SimpleUser.username}"></h1>
        </div>
        <h1>Welcome to the Information Center!</h1>
        <!--/*@thymesVar id="AdminUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.AdminUserAdditionalInfo"*/-->
        <p th:text="${AdminUserAdditionalInfo != null?'Additional information is logged. you can modify it now.' :'Additional information is not logged. you can add it now.'}">
        </p>
    </header>
    <section>
        <div class="DIV">
            <div class="CustomDiv">
                <h1>Password Management</h1>
                <div class="divideLine"></div>
                <p>
                    <label for="oldPassword" class="customLabel" id="oldPasswordLabel">
                        Old password
                    </label>
                    <input type="password" id="oldPassword" class="customInput" name="oldPassword" required
                           placeholder="Old password">
                </p>
                <p>
                    <label for="newPassword" class="customLabel" id="passwordLabel">
                        Change password
                    </label>
                    <input type="password" id="newPassword" class="customInput" name="password" required
                           placeholder="new password">
                </p>
                <p>
                    <label for="confirmPassword" class="customLabel" id="confirmPasswordLabel">
                        Confirm password
                    </label>
                    <label for="confirmPassword"></label>
                    <input type="password" id="confirmPassword"
                           class="customInput" required
                           placeholder="confirm password">
                </p>
                <button id="passwordResetButton" class="formButton">Reset</button>
                <button id="passwordSubmitButton" class="formButton">Submit</button>
                <div class="divideLine"></div>
                <span id="passwordResult"></span>
            </div>
        </div>
        <div class="DIV">
            <div class="CustomDiv">
                <h1>Information Management</h1>
                <div class="divideLine"></div>
                <p>
                    <label for="authenticationCode" class="customLabel" id="authenticationCodeLabel">
                        authenticationCode
                    </label>
                    <!--/*@thymesVar id="AdminUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.AdminUserAdditionalInfo"*/-->
                    <input type="text" id="authenticationCode" class="customInput" name="authenticationCode"
                           th:disabled="${AdminUserAdditionalInfo != null?'true' :'false'}"
                           th:placeholder="${AdminUserAdditionalInfo == null?'authenticationCode':AdminUserAdditionalInfo.authenticationCode}">
                </p>
                <button class="formButton" id="authResetButton">Reset</button>
                <button id="authSubmitButton" class="formButton">Submit</button>
                <div class="divideLine"></div>
                <span id="authResult"></span>
            </div>
        </div>
    </section>
</div>
</body>
<script>
    $(function () {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $(document).ajaxSend(function (e, xhr, options) {
            xhr.setRequestHeader(header, token);
        });
        $("#authResetButton").click(function () {
            $("#authenticationCode").val("");
        })
        $("#authSubmitButton").click(function () {
            let authenticationCode = $("#authenticationCode").val();
            let username = document.title;
            $.post("/AdminAuthentication",
                {
                    'username': username,
                    'authenticationCode': authenticationCode
                }, function (data, status, jqXHR) {
                    if (data) {
                        if (data.toString() === "true") {
                            $("#authResult").html("<span style='color: green'>Authentication code succeeded!</span>");
                            $("#authenticationCodeLabel").html("<span style='color: green'>Valid username!</span>")
                        } else if (data.toString() === "false") {
                            $("#authenticationCodeLabel").html("<span style='color: red'>Invalid authentication code! Try another.</span>")
                            $("#authResult").html("<span style='color: red'>failed!</span>");
                        } else if (data.toString() === "505") {
                            $("#authResult").html("<span style='color: red'>Inner bug raised</span>");
                        }

                    }
                }
            )
        });
    });
</script>
<script th:src="@{js/passwordModifier.js}"></script>
</html>